import React, {Component} from 'react';
import {Table, message, Breadcrumb, Select,Modal,Descriptions,
    Tag,PageHeader, Button, Input, Row, Col, Form, Popconfirm,Tooltip} from 'antd';
import {
    PlusOutlined,
    EditOutlined,
    DeleteOutlined,
    UploadOutlined,
    SearchOutlined
} from "@ant-design/icons";

import axios from "@src/lib/axios";
import "@src/style/tableCom.scss";
import "@src/style/common.scss";
import '@src/style/product.scss';

const {confirm} = Modal;

export default class PackageProductOrder extends Component{
    state = {
        params: {
            order_sn:"",
            status:"",
            contract_name:"",
            contract_phone:"",
            product_name:"",
            page: 1,
            size: 15,
            order_by:"",
            sort:""
        },
        list: [],
        total: 0,
        visible:false,
        info:{}
    };


    UNSAFE_componentWillMount() {
        this.fetchData();
    }


    fetchData = ()=>{
        let {params} = this.state
        axios.post("/activity/hot/order/list",params).then(res=>{
            let {data} = res
            this.setState({list:data.list})
        }).catch(res=>{
            console.log(res);
        });
        this.setState({list:[]})
    }


    onSearch = (values) => {
        Object.assign(this.state.params, {...values});
        console.log(this.state.params)
        this.fetchData();
    }
    //关闭订单
    onClose = (id) => {
        //请求接口修改数据
        axios.post("/activity/hot/order/close", {id}).then(res => {
            if (res.code === 0) {
                message.success(res.msg);
                this.fetchData();
            }
        });
    };


    onChangePage = (page) => {
        this.state.params.page = page;
        this.fetchData();
    };
    //确认收款
    onConfirm = (id) =>{
        axios.post("/activity/hot/order/confirm",{id}).then(res => {
            if (res.code === 0) {
                message.success(res.msg);
                this.fetchData();
            }else{
                message.warning(res.msg);
            }
        })
    };
    //核销
    onFinish = (id) =>{
        axios.post('/activity/hot/order/finish',{id}).then(res => {
            if (res.code === 0) {
                message.success(res.msg);
                this.fetchData();
            }else{
                message.warning(res.msg);
            }
        });
    };
    onRefund = (id) => {
        axios.post('/activity/hot/order/refund',{id}).then(res=>{
            if (res.code === 0) {
                message.success(res.msg);
                this.fetchData();
            }else{
                message.warning();
            }
        })
    }

    showConfirm = (id,text) => {
        const that = this;
        confirm({
            title: `是否`+text+`该订单?`,
            content: '',
            okText: '确认',
            cancelText: '取消',
            style: {padding: '32px 20px'},
            onOk() {
                switch (text) {
                    case "关闭":
                        that.onClose(id);
                        break;
                    case "确认":
                        that.onConfirm(id);
                        break;
                    case "核销":
                        that.onFinish(id);
                        break;
                    case "退款":
                        that.onRefund(id);
                }

            },
            onCancel() {
                console.log('Cancel');
            },
        });
    };

    showDetail = (id) =>{
        axios.post("/activity/hot/order/info",{id}).then(res=>{
            this.setState({info:res.data})
        }).catch(res=>{

        });
        this.setState({visible:true})
    };

    showOk = () =>{
        this.setState({visible:false})
    };

    showCancel = ()=>{
        this.setState({visible:false})
    };



    render() {
        let {list,total,info} = this.state
        const columns = [
            {title:"订单编号",dataIndex:"order_sn",align:"center"},
            {title:"产品名称",dataIndex:"product_name",ellipsis: {showTitle: false},render:(product_name) => {
                return (
                        <Tooltip placement="topLeft" title={product_name}>
                            {product_name}
                        </Tooltip>
                    )
                }},
            {title:"平台价",dataIndex:"platform_price",align:"center"},
            {title:"结算价",dataIndex:"settlement_price",align:"center"},
            {title:"联系人",dataIndex:"contract_name",align:"center"},
            {title:"联系人电话",dataIndex:"contract_phone",align:"center"},
            {title:"订单状态",dataIndex:"status",align:"center",render: (e, {id,status,status_text}) => {
                let color = ""
                if (status === 1 || status===6) {
                    color = "green"
                }else if (status === 2) {
                    color = "orange"
                }else if (status === 3) {
                    color = "magenta";
                }else if (status === 4 || status === 7) {
                    color = "grey";
                }else if (status === 5){
                    color = "blue";
                }else if (status === 8) {
                    color = "red";
                }
                    let tag = <Tag color={color}>{status_text}</Tag>
                return (
                        <div>
                            {tag}
                        </div>
                    )
                }
                },
            {title:"下单时间",dataIndex:"created_at",align:"center"},
            {title:"购买数量",dataIndex:"number",align:"center"},
            {title:"操作",dataIndex:"id",align:"center",render:(e,{id,status})=>{
                    return (
                        <div>
                            <Button  style={{"display":status==2 || status==7 ?"on":"none"}} type="link" onClick={() => this.showConfirm(id,"关闭")}>关闭</Button>
                            <Button  style={{"display":status==1 ? "on":"none"}} type="link" onClick={() => this.showConfirm(id,"确认")}>确认收款</Button>
                            <Button  style={{"display":status==5 || status==7 ?"on":"none"}} type="link" onClick={() => this.showConfirm(id,"核销")}>核销完成</Button>
                            {/*<Button  style={{"display":status==8 ? "on":"none"}} type="link" onClick={() => this.showConfirm(id,"退款")}>退款</Button>*/}
                            <Button type="link" onClick={() => this.showDetail(id)}>详情</Button>
                        </div>
                    );

                }
            }
        ];
        return (
            <div style={{padding: "0 15px 100px 15px", background: "#fff"}}>
                <div style={{padding: "10px 0px 1px 0px"}}>
                    <Breadcrumb>
                        <Breadcrumb.Item>产品管理</Breadcrumb.Item>
                        <Breadcrumb.Item>热卖产品</Breadcrumb.Item>
                        <Breadcrumb.Item>
                            <a href="#">订单列表</a>
                        </Breadcrumb.Item>
                    </Breadcrumb>
                </div>
                <Row style={{padding: "20px 0 0 0 "}}>
                    <Col span={24}>
                        <Form
                            style={{width:"auto"}}
                            size="small"
                            // labelCol={{span: 6}}
                            // wrapperCol={{span: 24}}
                            name="basic"
                            onFinish={this.onSearch}>

                            <Row gutter={10}>
                                <Col span={5}>
                                    <Form.Item colon={false} name="product_name">
                                        <Input placeholder="查询产品名称"/>
                                    </Form.Item>
                                </Col>
                                <Col span={5}>
                                    <Form.Item colon={false} name="contract_name">
                                        <Input placeholder="订单联系人"/>
                                    </Form.Item>
                                </Col>
                                <Col span={5}>
                                    <Form.Item colon={false} name="merchants_phone">
                                        <Input placeholder="联系人手机号"/>
                                    </Form.Item>
                                </Col>
                                <Col span={5}>
                                    <Form.Item colon={false} name="order_sn">
                                        <Input placeholder="订单编号"/>
                                    </Form.Item>
                                </Col>
                                <Col span={4}>
                                    <Form.Item colon={false} name={"status"}>
                                        <Select placeholder="订单状态" style={{width: 120}} allowClear>
                                            <Select.Option value="">全部状态</Select.Option>
                                            <Select.Option value="1">上架</Select.Option>
                                            <Select.Option value="2">下架</Select.Option>
                                        </Select>
                                    </Form.Item>
                                </Col>
                            </Row>
                            <Row>
                                <Button type="primary" htmlType="submit"><SearchOutlined />查询</Button>
                            </Row>
                        </Form>
                    </Col>

                </Row>

                <Row style={{padding: "20px 0 0 0 "}} >
                    <Col span={24}>
                        <Table
                            size="small"
                            columns={columns}
                            rowKey="id"
                            dataSource={list}
                            pagination={{
                                total: total,
                                pageSize: this.state.params.size,
                                current: this.state.params.page,
                                onChange: this.onChangePage
                            }}
                        />
                    </Col>
                </Row>

                <Modal
                    width ="600"
                    visible={this.state.visible}
                    onOk={this.showOk}
                    onCancel={this.showCancel}
                    maskClosable
                    maskStyle={{backgroundColor: 'rgba(0,0,0,.15)'}}
                >
                    <Descriptions title="订单详情" size="middle" bordered={true} >
                        <Descriptions.Item label="订单编号">{info.order_sn}</Descriptions.Item>
                        <Descriptions.Item label="联系人">{info.contract_name}</Descriptions.Item>
                        <Descriptions.Item label="联系人手机号">{info.contract_phone}</Descriptions.Item>
                        <Descriptions.Item label="联系人备注">{info.contract_remark}</Descriptions.Item>
                        <Descriptions.Item label="下单时间">{info.created_at}</Descriptions.Item>
                        <Descriptions.Item label="购买数量">{info.number}</Descriptions.Item>
                        <Descriptions.Item label="订单状态">{info.status_text}</Descriptions.Item>
                        <Descriptions.Item label="平台价">{info.platform_price}</Descriptions.Item>
                        <Descriptions.Item label="结算价">{info.settlement_price}</Descriptions.Item>
                        <Descriptions.Item label="商家电话">{info.merchants_phone}</Descriptions.Item>
                    </Descriptions>


                </Modal>
            </div>
        )
    }



}